<template>
  <div id="msg-center">
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog title="消息中心" :visible.sync="dialogVisible" width="1200px">
      <div class="main" v-if="messageSubscrib">
        <div class="mune">
          <div class="title">
            店铺标签
          </div>
          <div class="solid"></div>
          <div class="all-tag">
            <el-collapse
              class="collapse"
              v-model="activeNames"
              @change="handleChange"
            >
              <el-collapse-item name="1">
                <template slot="title">
                  全部标签
                </template>
                <div
                  class="tag-item"
                  v-for="(item, index) in [
                    '标签一号',
                    '标签二号',
                    '标签三号',
                    '标签四号',
                    '标签五号'
                  ]"
                  :key="index"
                >
                  <p>{{ item }}</p>
                  <div class="edit">
                    <el-link icon="el-icon-edit"></el-link>
                    <el-link
                      ><i class="el-icon-delete el-icon--right"></i>
                    </el-link>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div class="right">
          <div class="bag">
            <el-button class="bag-item" type="primary" size="mini" plain
              >全部已读</el-button
            >
            <el-button
              class="bag-item"
              type="primary"
              size="mini"
              plain
              @click="changeMessageSubscrib"
              >信息中心</el-button
            >
          </div>
          <el-tabs
            :tab-position="tabPosition"
            style="height: 585px;"
            class="childTab"
          >
            <!-- <el-tab-pane v-for="(item, index) in msgs" :key="index">
              <div slot="label" class="item">
                {{ item.msg }}
                <span class="item-num">145</span>
              </div>
              <el-tabs
                :tab-position="tabPosition"
                style="height: 585px;"
                class="none"
              >
                <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                <el-tab-pane label="配置管理">配置管理</el-tab-pane>
              </el-tabs> -->

            <!-- <el-tab-pane label="新订单"> -->
            <!-- <el-collapse class="right-main" @change="show1" accordion>
                    <el-collapse-item
                      v-for="(item, index) in newOders"
                      :key="index"
                    >
                      <template slot="title" v-if="show">
                        <div class="introduc">
                          <span class="brief"
                            >在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</span
                          >
                          <span class="time">2020-10-31 12:00</span>
                        </div>
                      </template>
                      <template slot="title" v-else>
                        <div class="new-order">
                          <div class="order">新订单</div>
                          <span class="time">2020-10-31 12:00</span>
                        </div>
                      </template>
                      <div>
                        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等
                      </div>
                    </el-collapse-item></el-collapse
                  ></el-tab-pane> -->

            <!-- <el-tab-pane label="买家已付款"
                  ><el-collapse class="right-main" @change="show1" accordion>
                    <el-collapse-item
                      v-for="(item, index) in newOders"
                      :key="index"
                    >
                      <template slot="title" v-if="show">
                        <div class="introduc">
                          <span class="brief"
                            >在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</span
                          >
                          <span class="time">2020-10-31 12:00</span>
                        </div>
                      </template>
                      <template slot="title" v-else>
                        <div class="new-order">
                          <div class="order">新订单</div>
                          <span class="time">2020-10-31 12:00</span>
                        </div>
                      </template>
                      <div>
                        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等
                      </div>
                    </el-collapse-item></el-collapse
                  ></el-tab-pane
                >
                <el-tab-pane label="订单完成">角色管理</el-tab-pane>
                <el-tab-pane label="订单地址修改">定时任务补偿</el-tab-pane>
                <el-tab-pane label="订单备注修改">定时任务补偿</el-tab-pane> -->
            <!-- </el-tabs> -->
            <!-- </el-tab-pane> -->

            <el-tab-pane v-for="(item, index) in msgs" :key="index">
              <div slot="label" class="item">
                {{ item.msg }}
                <span class="item-num">45</span>
              </div>
              <el-tabs :tab-position="tabPosition" style="height: 585px;">
                <!-- <el-tab-pane v-for="(item, index) in msgs" :key="index">
               <div slot="label" class="item">
                {{ item.msg }}
                <span class="item-num">145</span>
              </div>
              <el-tabs :tab-position="tabPosition" style="height: 585px;">
                <el-tab-pane label="商品下架"
                  ><el-collapse class="right-main" @change="show1" accordion>
                    <el-collapse-item
                      v-for="(item, index) in newOders"
                      :key="index"
                    >
                      <template slot="title" v-if="show">
                        <div class="introduc">
                          <span class="brief"
                            >在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</span
                          >
                          <span class="time">2020-10-31 12:00</span>
                        </div>
                      </template>
                      <template slot="title" v-else>
                        <div class="new-order">
                          <div class="order">新订单</div>
                          <span class="time">2020-10-31 12:00</span>
                        </div>
                      </template>
                      <div>
                        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等
                      </div>
                    </el-collapse-item></el-collapse
                  ></el-tab-pane
                > -->
                <el-tab-pane
                  v-for="(subItem, subIndex) in item.content"
                  :key="subIndex"
                >
                  <div slot="label" class="item">
                    {{ subItem.msg }}
                    <span class="item-num">66</span>
                  </div>

                  <el-collapse class="right-main" @change="show1" accordion>
                    <el-collapse-item
                      v-for="(fourItem, fourIndex) in subItem.newOders"
                      :name="fourItem.id"
                      :key="fourIndex"
                    >
                      <template slot="title" v-if="idVal != fourItem.id">
                        <div class="introduc">
                          <span class="brief">{{ fourItem.msg }}</span>
                          <span class="time">{{ fourItem.date }}</span>
                        </div>
                      </template>
                      <template slot="title" v-else>
                        <div class="new-order">
                          <div class="order">{{ fourItem.name }}</div>
                          <span class="time">{{ fourItem.date }}</span>
                        </div>
                      </template>
                      <div>
                        {{ fourItem.detailText }}
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>

            <!-- <el-tab-pane label="营销活动">
              <el-tabs :tab-position="tabPosition" style="height: 585px;">
                <el-tab-pane label="营销活动报名"
                  ><el-collapse class="right-main" @change="show1" accordion>
                    <el-collapse-item
                      v-for="(item, index) in newOders"
                      :key="index"
                    >
                      <template slot="title" v-if="show">
                        <div class="introduc">
                          <span class="brief"
                            >在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</span
                          >
                          <span class="time">2020-10-31 12:00</span>
                        </div>
                      </template>
                      <template slot="title" v-else>
                        <div class="new-order">
                          <div class="order">新订单</div>
                          <span class="time">2020-10-31 12:00</span>
                        </div>
                      </template>
                      <div>
                        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等
                      </div>
                    </el-collapse-item></el-collapse
                  ></el-tab-pane
                >
                <el-tab-pane label="营销活动催报">配置管理</el-tab-pane>
                <el-tab-pane label="营销活动邀请">角色管理</el-tab-pane>
                <el-tab-pane label="营销活动审核通过">定时任务补偿</el-tab-pane>
                <el-tab-pane label="营销活动审核驳回">定时任务补偿</el-tab-pane>
              </el-tabs>
            </el-tab-pane> -->
          </el-tabs>
        </div>
      </div>
      <!-- <msgBook v-else /> -->
      <div class="book" v-else>
        <el-tabs
          v-model="activeName1"
          @tab-click="handleClick"
          class="book-tab"
        >
          <el-tab-pane
            :label="item1.label"
            :name="item1.name"
            v-for="(item1, index1) in tabContent"
            :key="index1"
          >
            <el-tabs
              :class="currenIndex === index1 ? 'content' : ''"
              v-model="activeName2"
              :tab-position="tabPosition"
              @tab-click="handleClick"
              v-for="(item2, index2) in tabContent[index1].content"
              :key="index2"
            >
              <el-tab-pane :label="item2.label" :name="item2.name">
                11
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import msgBook from './msg-book'
export default {
  // components: {
  //   msgBook
  // },
  data() {
    return {
      dialogVisible: false,
      tabPosition: 'left',
      activeNames: '',
      messageSubscrib: true,
      show: true,

      idVal: '',

      newOders: [
        {
          msg: '在界面中一致：所有的元素和结构需保持一致',
          date: '2020-10-31 12:00',
          img: '',
          name: '新订单',
          num: 2,
          nickname: '茶茶',
          number: 22
        },
        {
          msg: '在界面中一致：所有的元素和结构需保持一致',
          date: '2020-10-31 12:00',
          img: '',
          name: '新订单',
          num: 2,
          nickname: '茶茶',
          number: 22
        },
        {
          msg: '在界面中一致：所有的元素和结构需保持一致',
          date: '2020-10-31 12:00',
          img: '',
          name: '新订单',
          num: 2,
          nickname: '茶茶',
          number: 22
        }
      ],
      msgs: [
        {
          id: 1,
          msg: '交易消息',
          content: [
            {
              id: 11,
              msg: '新订单',
              newOders: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22,
                  detailText: '21212222',
                  id: '11'
                },
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22,
                  detailText: 'asddddd',
                  id: '22'
                }
              ]
            },
            {
              id: 12,
              msg: '买家已付款',
              newOders: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22,
                  detailText: '21212222',
                  id: '11'
                }
              ]
            },
            {
              id: 13,
              msg: '订单完成',
              newOders: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22,
                  detailText: '21212222',
                  id: '11'
                },
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22,
                  detailText: 'asddddd',
                  id: '22'
                }
              ]
            },
            {
              id: 14,
              msg: '订单地址修改',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            },
            {
              id: 15,
              msg: '订单备注修改',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            }
          ]
        },
        {
          id: 2,
          msg: '商品消息',
          content: [
            {
              id: 11,
              msg: '商品下架',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            },
            {
              id: 22,
              msg: '商品删除',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            },
            {
              id: 23,
              msg: '商品无货提醒',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            }
          ]
        },
        {
          id: 3,
          msg: '营销活动',
          content: [
            {
              id: 31,
              msg: '营销活动报名',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            },
            {
              id: 32,
              msg: '营销活动催报',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            },
            {
              id: 33,
              msg: '营销活动邀请',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            },
            {
              id: 34,
              msg: '营销活动审核通过',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            },
            {
              id: 35,
              msg: '营销活动审核驳回',
              content: [
                {
                  msg: '在界面中一致：所有的元素和结构需保持一致',
                  date: '2020-10-31 12:00',
                  img: '',
                  name: '新订单',
                  num: 2,
                  nickname: '茶茶',
                  number: 22
                }
              ]
            }
          ]
        }
      ],
      currenIndex: 0,
      activeName1: 'subscribed',
      activeName2: 'transactionInfo',
      tabContent: [
        {
          label: '已订阅',
          name: 'subscribed',
          content: [
            { label: '交易消息', name: 'transactionInfo', content: [1, 2] },
            { label: '商品消息', name: 'productInfo' }
          ]
        },
        {
          label: '未订阅',
          name: 'unsubscrib',
          content: [
            { label: '营销活动', name: 'marketingActivities', content: [] }
          ]
        }
      ]
    }
  },
  created() {},
  methods: {
    handleChange() {},
    show1(val) {
      // console.log(val, '拿到之')
      this.idVal = val
      // this.show = !this.show
    },
    handleClick() {},
    changeMessageSubscrib() {
      this.messageSubscrib = !this.messageSubscrib
      // console.log(1)
    }
  }
}
</script>

<style lang="less" scoped>
#msg-center {
  /deep/.el-dialog {
    height: 640px;
    border-radius: 10px;
  }
  /deep/.el-dialog__body {
    padding-top: 0;
  }
  /deep/.el-dialog__header {
    border-bottom: solid 1px #e5e5e5;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 23px;
    letter-spacing: 1px;
    color: #333333;
    padding-left: 33px;
  }
  /deep/.el-tabs__nav-wrap {
    padding-right: 2px;
  }
  /deep/.el-dialog__body {
    padding-right: 0;
  }
  /deep/.el-collapse-item__content {
    padding-bottom: 0;
  }
  /deep/.el-collapse-item__header.is-active {
    background-color: #e5e5e5;
  }
  .main {
    display: flex;
    .none {
      display: none;
    }
    .block {
      display: block;
    }
    .mune {
      width: 200px;
      height: 585px;
      padding: 15px 0;
      border-right: solid 1px #e5e5e5;
      padding-right: 30px;
      .title {
        padding-left: 10px;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        line-height: 23px;
        letter-spacing: 1px;
        color: #333333;
      }
      .solid {
        border-bottom: 1px solid #cccccc;
        margin: 15px 0px;
      }
      .all-tag {
        padding-left: 8px;
        .collapse {
          border: none;
        }
        .active {
          background: #fef2e9;
          cursor: pointer;
          height: 34px;
          border-radius: 10px;
        }
        .tag-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 34px;
          padding: 0 10px;
          height: 34px;
          &:hover {
            background: #fef2e9;
            // padding: 0 10px;
            cursor: pointer;
            height: 34px;
            border-radius: 10px;
          }
        }
      }
    }
    .right {
      /deep/.el-tabs__header {
        margin-right: 0;
        width: 200px;
      }
      /deep/.el-tabs__header .is-left {
        width: 200px;
        text-align: left;
      }
      /deep/.el-tabs__active-bar {
        background: #fdf9f3;
        z-index: -1;
        padding-left: 0;
      }
      position: relative;
      .bag {
        width: 136px;
        bottom: 21px;
        left: 34px;
        position: absolute;
        z-index: 100;
        .bag-item {
          width: 136px;
          background-color: white;
          margin-bottom: 12px;
        }
      }
      .item {
        display: flex;
        justify-content: space-between;
      }
      .item-num {
        // line-height: 40px;
        padding: 0px 4px;
        color: #fff;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        margin-top: 10px;
        // margin-left: 87px;
        background-color: #f97c28;
        border-radius: 50%;
      }
      .right-main {
        width: 580px;
        .introduc {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .brief {
            width: 300px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .new-order {
          width: 100%;
          display: flex;
          justify-content: space-between;
          // background-color: #f5f5f5;
          .order {
            margin-left: 20px;
          }
        }
      }
    }
    .book {
      .book-tab {
        /deep/ .el-tabs {
          display: none;
        }
        // /deep/.el-tabs__header {
        //   margin-right: 0;
        //   width: 200px;
        // }
        // /deep/.el-tabs__header .is-left {
        //   width: 200px;
        //   text-align: left;
        // }
        // /deep/.el-tabs__active-bar {
        //   background: #fdf9f3;
        //   z-index: -1;
        //   padding-left: 0;
        // }
      }
    }
    .content {
      display: block;
    }
  }
}
.time {
  width: 140px;
  margin-right: 20px;
}
</style>
